<template>
  <Layout :class="'bg-white p-2'">
    <Row>
      <Col>
        <Select
          v-model="proid"
          placeholder="请选择项目"
          filterable
          clearable
          @on-change="searchEqu()"
          @on-select="isSelect"
        >
          <Option v-for="item in prolist" :value="item.id"
            >{{ item.proName }}
          </Option>
        </Select>
      </Col>
      <Col offset="1">
        <Select
          v-model="equId"
          placeholder="请选择设备"
          filterable
          clearable
          on
          @on-change="searchIt"
          :disabled="isSelectBoolean"
        >
          <Option v-for="item in equlist" :value="item.id"
            >{{ item.equipmentName }}
          </Option>
        </Select>
      </Col>
      <Col span="2" push="1">
        <Button
          class="m-2 w-75 search-btn"
          type="primary"
          shape="circle"
          icon="ios-search"
          @click="search()"
          >查询</Button
        >
      </Col>
    </Row>
    <Row>
      <Col span="4">
        <Date-picker
          @on-change="searchStartTimeChange"
          :class="'w-100 m-2'"
          type="datetime"
          v-model="searchStartTime"
          placeholder="数据开始时间"
          transfer
        >
        </Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="4">
        <Date-picker
          @on-change="searchEndTimeChange"
          :class="'w-100 m-2'"
          type="datetime"
          v-model="searchEndTime"
          placeholder="数据结束时间"
          transfer
        >
        </Date-picker>
      </Col>
    </Row>
    <br />
    <Row>
      <Col span="24">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>项目描述</span>
          </div>
          <p>{{ proInfo.proInfo }}</p>
        </Card>
      </Col>
    </Row>
    <br />
    <Row>
      <Col span="11">
        <Card id="project_list_card">
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>报警预警</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table1.columnInfo"
            :data="table1.data"
          ></Table>
          <Page
            class="pages"
            :class="'m-2 text-right'"
            :page-size="table1.size"
            @on-change="pageBaojingSearch"
            :total="table1.total"
            :current="table1.page"
            show-sizer
            @on-page-size-change="changeBaojingSize"
            :pageSizeOpts="pageSizeOpts"
          />
        </Card>
      </Col>
      <Col span="11" offset="1">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>车钩智能分析</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table2.columnInfo"
            :data="table2.data"
          ></Table>
          <Page
            class="pages"
            :class="'m-2 text-right'"
            :page-size="table2.size"
            @on-change="pageChegouSearch"
            :total="table2.total"
            :current="table2.page"
            show-sizer
            @on-page-size-change="changeChegouSize"
            :pageSizeOpts="pageSizeOpts"
          />
        </Card>
      </Col>
    </Row>
    <br />
    <Row>
      <Col span="11">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>轨道状态分析</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table4.columnInfo"
            :data="table4.data"
          ></Table>
          <!--table4 轨道状态分析表 分页-->
          <Page
            class="pages"
            :class="'m-2 text-right'"
            :page-size="table4.size"
            @on-change="table4PageSearch"
            :total="table4.totalCount"
            :current="table4.page"
            show-sizer
            @on-page-size-change="table4ChangeSize"
			:pageSizeOpts="pageSizeOpts"
          />
        </Card>
      </Col>
      <Col span="11" offset="1">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>压车臂检测</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table3.columnInfo"
            :data="table3.data"
          ></Table>
          <Page
            class="pages"
            :class="'m-2 text-right'"
            :page-size="table3.size"
            @on-change="table3PageSearch"
            :total="table3.totalCount"
            :current="table3.page"
            show-sizer
            @on-page-size-change="table3ChangeSize"
			 :pageSizeOpts="pageSizeOpts"
          />
        </Card>
      </Col>
    </Row>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      proInfo: {},
      pageSizeOpts: [10, 20, 50, 100, 200],
      searchStartTime: '',
      searchEndTime: '',
      isSelectBoolean: true,
      equId: '',
      proid: '',
      prolist: [],
      equlist: [],
      id: '',
      table1: {
        page: 1,
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '报警内容',
            key: 'type',
          },
          {
            title: '报警类型',
            key: 'bjxx',
          },
          {
            title: '报警时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table2: {
        page: 1,
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '挂钩状态',
            key: 'ggzt',
          },
          {
            title: 'AI识别信号',
            key: 'aixbxh',
          },
          {
            title: '时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table3: {
        page: 1,
        size: 10,
        totalCount: 0,
        totalPage: 0, // 默认一页十条
        columnInfo: [
          {
            title: '压车臂1#信号',
            key: 'ycbxh1',
          },
          {
            title: '压车臂2#信号',
            key: 'ycbxh2',
          },
          {
            title: '压车臂3#信号',
            key: 'ycbxh3',
          },
          {
            title: '压车臂4#信号',
            key: 'ycbxh4',
          },
          {
            title: '数据时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table4: {
        page: 1,
        size: 10,
        totalCount: 0,
        totalPage: 0, // 默认一页十条
        columnInfo: [
          {
            title: '轨道状态',
            key: 'dgzt',
          },
          {
            title: '翻转角度',
            key: 'fzjd',
          },
          {
            title: '对轨激光信号',
            key: 'dgjgxh',
          },
          {
            title: '时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
    }
  },
  methods: {
    searchStartTimeChange: function(searchStartTime) {
      this.searchStartTime = searchStartTime
    },
    searchEndTimeChange: function(searchEndTime) {
      this.searchEndTime = searchEndTime
    },
    table4ChangeSize: function(changeSize) { //changeSize
      this.$data.table4.page = 1
	  this.$data.table4.size = changeSize
	  
	  if (this.searchStartTime == '') {
	    this.searchStartTime = null
	  }
	  if (this.searchEndTime == '') {
	    this.searchEndTime = null
	  }
	  
	  var trackPagePOJO = {
	    equipmentId: this.equId,
	    page: this.$data.table4.page,
	    size: this.$data.table4.size,
	    searchStartTime: this.searchStartTime,
	    searchEndTime: this.searchEndTime,
	  }
	  this.http
	    .get({
	      url: '/monitor/trackPage/list',
	      param: trackPagePOJO,
	    })
	    .then((data) => {
	      this.$data.table4.page = data.page
	      this.$data.table4.size = data.size
	      this.$data.table4.totalCount = data.totalCount
	      this.$data.table4.data = data.monitorList
	    })
    },
    table4PageSearch: function(changedPage) {
      this.$data.table4.page = changedPage

      if (this.searchStartTime == '') {
        this.searchStartTime = null
      }
      if (this.searchEndTime == '') {
        this.searchEndTime = null
      }

      var trackPagePOJO = {
        equipmentId: this.equId,
        page: this.$data.table4.page,
        size: this.$data.table4.size,
        searchStartTime: this.searchStartTime,
        searchEndTime: this.searchEndTime,
      }
      this.http
        .get({
          url: '/monitor/trackPage/list',
          param: trackPagePOJO,
        })
        .then((data) => {
          this.$data.table4.page = data.page
          this.$data.table4.size = data.size
          this.$data.table4.totalCount = data.totalCount
          this.$data.table4.data = data.monitorList
        })
    },
    table3ChangeSize: function(changeSize) { //changeSize
      this.$data.table3.page = 1
	  this.$data.table3.size = changeSize
	  if (this.searchStartTime == '') {
	    this.searchStartTime = null
	  }
	  if (this.searchEndTime == '') {
	    this.searchEndTime = null
	  }
	  
	  var pressArmPagePOJO = {
	    equipmentId: this.equId,
	    page: this.$data.table3.page,
	    size: this.$data.table3.size,
	    searchStartTime: this.searchStartTime,
	    searchEndTime: this.searchEndTime,
	  }
	  this.http
	    .get({
	      url: '/monitor/pressArmPage/list',
	      param: pressArmPagePOJO,
	    })
	    .then((data) => {
	      this.$data.table3.page = data.page
	      this.$data.table3.size = data.size
	      this.$data.table3.totalCount = data.totalCount
	      this.$data.table3.data = data.monitorList
	    })
    },
    table3PageSearch: function(changedPage) {
      this.$data.table3.page = changedPage

      if (this.searchStartTime == '') {
        this.searchStartTime = null
      }
      if (this.searchEndTime == '') {
        this.searchEndTime = null
      }

      var pressArmPagePOJO = {
        equipmentId: this.equId,
        page: this.$data.table3.page,
        size: this.$data.table3.size,
        searchStartTime: this.searchStartTime,
        searchEndTime: this.searchEndTime,
      }
      this.http
        .get({
          url: '/monitor/pressArmPage/list',
          param: pressArmPagePOJO,
        })
        .then((data) => {
          this.$data.table3.page = data.page
          this.$data.table3.size = data.size
          this.$data.table3.totalCount = data.totalCount
          this.$data.table3.data = data.monitorList
        })
    },
    pageBaojingSearch: function(changedPage) {
      this.$data.table1.page = changedPage
      this.search()
    },
    changeBaojingSize: function(changeSize) {
      this.$data.table1.size = changeSize
      this.search()
    },
    pageChegouSearch: function(changedPage) {
      this.$data.table2.page = changedPage
      this.search()
    },
    changeChegouSize: function(changeSize) {
      this.$data.table2.size = changeSize
      this.search()
    },
    isSelect: function() {
      this.isSelectBoolean = false
    },
    searchIt: function() {
      this.search()
    },
    searchpro: function() {
      let self = this
      this.http
        .get({
          url: '/pro/list',
        })
        .then((data) => {
          this.prolist = data
        })
    },
    searchEqu: function() {
      this.searchProInfo()
      this.http
        .get({
          url: `/pro_equ_ref/list/${this.proid}`,
        })
        .then((data) => {
          this.equlist = data
        })
    },
    searchProInfo: function() {
      this.http
        .get({
          url: `/pro/${this.proid}`,
        })
        .then((data) => {
          this.proInfo = data
        })
    },
    search: function() {
      this.http
        .get({
          url: '/alert/alllist',
          param: {
            id: this.equId,
            page: this.table1.page,
            size: this.table1.size,
            StartTime: this.searchStartTime,
            endTime: this.searchEndTime,
          },
        })
        .then((data) => {
          console.log(data)
          this.table1.page = data.page
          this.table1.size = data.size
          this.table1.total = data.total
          this.table1.totalPage = data.totalPage
          this.$data.table1.data = data.list
        })

      //车钩智能分析
      this.http
        .get({
          url: '/monitor/hookStatu/alllist',
          param: {
            id: this.equId,
            page: this.table2.page,
            size: this.table2.size,
            StartTime: this.searchStartTime,
            endTime: this.searchEndTime,
          },
        })
        .then((data) => {
          this.table2.page = data.page
          this.table2.size = data.size
          this.table2.total = data.total
          this.table2.totalPage = data.totalPage
          this.$data.table2.data = data.list
        })

      if (this.searchStartTime == '') {

        this.searchStartTime = null
      }
      if (this.searchEndTime == '') {
        this.searchEndTime = null
      }

      //轨道状态分析
      this.$data.table4.page = 1
      var trackPagePOJO = {
        equipmentId: this.equId,
        page: this.$data.table4.page,
        size: this.$data.table4.size,
        searchStartTime: this.searchStartTime,
        searchEndTime: this.searchEndTime,
      }

      this.http
        .get({
          url: '/monitor/trackPage/list',
          param: trackPagePOJO,
        })
        .then((data) => {
          this.$data.table4.page = data.page
          this.$data.table4.size = data.size
          this.$data.table4.totalCount = data.totalCount
          this.$data.table4.data = data.monitorList
        })

      //压车臂状态分析
      this.$data.table3.page = 1
      var pressArmPagePOJO = {
        equipmentId: this.equId,
        page: this.$data.table3.page,
        size: this.$data.table3.size,
        searchStartTime: this.searchStartTime,
        searchEndTime: this.searchEndTime,
      }
      this.http
        .get({
          url: '/monitor/pressArmPage/list',
          param: trackPagePOJO,
        })
        .then((data) => {
          this.$data.table3.page = data.page
          this.$data.table3.size = data.size
          this.$data.table3.totalCount = data.totalCount
          this.$data.table3.data = data.monitorList
        })
    },
  },
  created() {
    this.searchpro()
  },
}
</script>

<style>
.to {
  padding: 10px 10px 0px 30px;
}
#project_list_card .ivu-table-body span {
  color: red;
}
</style>
